<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">
		<el-tabs v-model="activeName">
			
			<el-tab-pane label="支付设置" name="second">
				<el-table border class="mt-3" :data="tableData" style="width: 100%">
					<el-table-column label="支付方式" align="left" >
						<template slot-scope="scope">
							<div class="d-flex align-items-center">
								<img :src="scope.row.src" 
								style="width: 40px;height: 40px;"
								class="mr-2 rounded"/>
								<div class="d-flex flex-column" style="align-items: flex-start;">
									<h6>{{scope.row.name}}</h6>
									<small class="d-block text-secondary">
										{{scope.row.desc}}
									</small>
								</div>
							</div>
						</template>
					</el-table-column>
					
					
					<el-table-column label="操作" width="150">
						<template slot-scope="scope">
							<el-button type="text" size="mini"
							@click="openDrawer(scope.row.key)">
								配置
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="购物设置" name="third">
				<el-form ref="form" :model="form" label-width="130px">
					
					<el-form-item label="未支付订单">
						<el-input style="width: 40%;"
						size="mini" 
						type="number"
						v-model="form.close_order_minute"
						>
							<template slot="append">分钟后自动关闭订单</template>
						</el-input>
						<small class="text-secondary d-block">订单下单后n天后自动关闭，0不自动关闭<a href="#">快递100申请</a></small>
					</el-form-item>
					<el-form-item label="已发货订单">
						<el-input style="width: 40%;"
						size="mini" 
						type="number"
						v-model="form.auto_received_day"
						>
							<template slot="append">天后自动确认收货</template>
						</el-input>
						<small class="text-secondary d-block">如果在期间未确认收货，系统自动完成收货</small>
					</el-form-item>
					<el-form-item label="已完成订单">
						<el-input style="width: 40%;"
						size="mini" 
						type="number"
						v-model="form.after_sale_day"
						>
							<template slot="append">天内允许申请售后</template>
						</el-input>
						<small class="text-secondary d-block">订单完成后，用户在n天内可以发起售后申请，设置0天不允许申请售后</small>
					</el-form-item>
					<el-form-item>
						<el-button size="mini" type="primary" @click="submit">保存</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		
		<!-- 支付宝支付配置抽屉 -->
		<el-drawer
			title="配置"
			:visible.sync="drawer"
			direction="rtl"
			size="50%"
			:before-close="handleClose">
		
			<div style="position: absolute;top: 52px;left: 0;right: 0;bottom: 0;">
				<div style="position: absolute;top: 0;right: 0;left: 0;bottom: 60px;overflow-y: auto;">
					
					<el-form ref="form" label-width="120px"
					v-if="drawerType == 'alipay'">
						
						<el-form-item label="app_id" prop="app_id">
							<el-col :span="20">
								<el-input v-model="form.alipay.app_id" 
								placeholder="app_id" size="mini"
								></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="公钥" prop="ali_public_key">
							<el-col :span="20">
								<el-input v-model="form.alipay.ali_public_key" 
								type="textarea"
								rows="5"
								placeholder="公钥" size="mini"></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="私钥" >
							<el-col :span="20">
								<el-input v-model="form.alipay.private_key" 
								type="textarea"
								rows="5"
								placeholder="私钥" size="mini"></el-input>
							</el-col>
						</el-form-item>
					</el-form>
					
					<!-- 微信支付表单 -->
					<el-form ref="form" label-width="120px"
					v-if="drawerType == 'wxpay'">
						
						<el-form-item label="公众号appid" prop="app_id">
							<el-col :span="20">
								<el-input v-model="form.wxpay.app_id" 
								placeholder="公众号appid" size="mini"
								></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="小程序appid" prop="miniapp_id">
							<el-col :span="20">
								<el-input v-model="form.wxpay.miniapp_id" 
								placeholder="小程序appid" size="mini"
								></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="小程序secret" prop="secret">
							<el-col :span="20">
								<el-input v-model="form.wxpay.secret" 
								type="textarea"
								rows="5"
								placeholder="小程序secret" size="mini"></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="appid" prop="appid">
							<el-col :span="20">
								<el-input v-model="form.wxpay.appid" 
								placeholder="appid" size="mini"
								></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="商户号" prop="mch_id">
							<el-col :span="20">
								<el-input v-model="form.wxpay.mch_id" 
								placeholder="商户号" size="mini"
								></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="api密钥" >
							<el-col :span="20">
								<el-input v-model="form.wxpay.key" 
								type="textarea"
								rows="5"
								placeholder="api密钥" size="mini"></el-input>
							</el-col>
						</el-form-item>
						<el-form-item label="客户端证书" >
							<el-col :span="20">
								<el-upload
								action="/admin/sysconfig/upload"
								:limit="1"
								:headers="{token: $store.state.user.token}"
								accept=".pem"
								:on-success="uploadClientSuccess"
								>
									<el-button size="mini" type="primary">
										点击上传
									</el-button>
									<div slot="tip"class="el-upload__tip">
										<div class="text-danger">
											{{form.wxpay.cert_client ? form.wxpay.cert_client : '还未配置'}}
										</div>
										<div class="text-muted small">例如：apiclient_cert.pem</div>
									</div>
								</el-upload>
							</el-col>
						</el-form-item>
						<el-form-item label="客户端证书key" >
							<el-col :span="20">
								<el-upload
								action="/admin/sysconfig/upload"
								:limit="1"
								:headers="{token: $store.state.user.token}"
								accept=".pem"
								:on-success="uploadKeySuccess"
								>
									<el-button size="mini" type="primary">
										点击上传
									</el-button>
									<div slot="tip"class="el-upload__tip">
										<div class="text-danger">
											{{form.wxpay.cert_key ? form.wxpay.cert_key : '还未配置'}}
										</div>
									</div>
								</el-upload>
							</el-col>
						</el-form-item>
					</el-form>
					
				</div>
				<div style="height: 60px;position: absolute;bottom: 0;right: 0;left: 0;"
				class="border d-flex align-items-center bg-white">
					<el-button class="ml-2" @click="drawer = false">取消</el-button>
					<el-button type="primary" @click="submit">确定</el-button>
				</div>
			</div>
			
		</el-drawer>
	</div>
</template>

<script>
	export default {
		inject:['layout'],
		
		created() {
			this.getData()
		},
		
		data() {
			return {
				drawer: false,
				drawerType: 'alipay',
				
				activeName: 'second',
				
				form: {
					close_order_minute: 0,
					auto_received_day: 0,
					after_sale_day: 0,
					alipay: {
						app_id: '',
						ali_public_key: '',
						private_key: ''
					},
					wxpay: {
						app_id: '', //公众号 appid
						miniapp_id: '', //小程序appid
						secret:'', //小程序secret
						appid: '', //appid
						mch_id: '', //商户号
						key: '', //api 密钥
						cert_client: '',
						cert_key: ''
					}
				},
				
				tableData: [
					{
						key: 'alipay',
						name:'支付宝支付',
						desc: '该系统支持即时到账接口',
						src: 'http://wxcs.niuteam.cn/addons/NsAlipay/ico.png'
					},
					{
						key: 'wxpay',
						name:'微信支付',
						desc: '该系统支持微信网页支付和扫码支付',
						src: 'http://wxcs.niuteam.cn/addons/NsWeixinpay/ico.png'
					},
				],
			}
		},
		
		methods: {
			getData() {
				this.layout.showLoading()
				this.axios.get('/admin/sysconfig', {token: true})
					.then(res => {
						let data = res.data.data
						console.log(data)
						this.form = data
						this.layout.hideLoading()
					}).catch(err => {
						this.layout.hideLoading()
					})
			},
			
			//
			uploadClientSuccess(response, file, fileList) {
				this.form.wxpay.cert_client = response.data
			},
			
			uploadKeySuccess(response, file, fileList) {
				this.form.wxpay.cert_key = response.data
			},
			//open drawer
			openDrawer(type) {
				this.drawerType = type
				this.drawer = true
			},
			
			//
			submit() {
				
				this.layout.showLoading()
				this.axios.post('/admin/sysconfig', this.form, {token: true})
					.then(res => {
						this.drawer = false
						this.getData()
						this.layout.hideLoading()
						this.$message({
							message: '恭喜你，修改配置成功',
							type: 'success'
						});
					}).catch(err => {
						this.layout.hideLoading()
					})
			},
			
			//抽屉关闭事件
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {})
			},
		}
		
		
	}
</script>

<style>
</style>
